<template>
  <div class="cart-container">
    <el-tabs v-model="listQuery.queryState" @tab-click="handleClick">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="待支付" name="1"></el-tab-pane>
      <el-tab-pane label="已支付" name="2"></el-tab-pane>
      <el-tab-pane label="已取消" name="3"></el-tab-pane>
    </el-tabs>
    <div class="moco-course-list">
      <table class="cart-list-table" v-for="item in list" :key="item.id">
        <thead>
        <tr>
          <td class="text-left">
            <span>订单编号：{{item.orderNo}}</span>
            <span style="margin-left: 10px;">{{item.createTime}}</span>
          </td>
          <td>金额（元）</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr class="cart-list-item course_tr" >
          <td>
            <div class="cart-content">
              <img class="left" src="~@assets/images/course_login.png" v-real-img="item.picPath" alt="">
              <div class="left cart-item-title" :title="$utils.unEscapeHTML(item.productName)">{{$utils.unEscapeHTML(item.productName)}}</div>
              <div class="self-buy" v-if="item.productType == 3">自购课程</div>
            </div>
          </td>
          <td class="only-price"><p class="orange-price" >￥{{$utils.calPrice(item.totalPrice)}}</p></td>
          <td class="cart-item-stauts">
            <span v-if="item.invoicePdf && item.invoicePdf != ''">已开票</span>
            <span v-else>
               <span v-if="item.orderStatus == '0'">待支付</span>
              <span v-if="item.orderStatus == '1'">已支付</span>
              <span v-if="item.orderStatus == '2'">已完成</span>
              <span v-if="item.orderStatus == '3'">已取消</span>
              <span v-if="item.isRefund == '1'">已退款</span>
              <span v-if="item.isRefund == '2'">已部分退款</span>
            </span>

            <a @click="toOrderDetail(item)" v-if="item.productType != 3">订单详情</a>
            <a @click="toOrderBuyDetail(item)" v-if="item.productType == 3">自购详情</a>
          </td>
          <td class="cart-list-btns">
            <div class="btn goto-pay" @click="toPay(item)" v-if="item.orderStatus == '0'">我要支付</div>
            <div class="btn" @click="removeOrder(item.id)" v-if="item.orderStatus == '0'">取消订单</div>
            <div class="btn goto-pay" v-if="item.orderStatus == '1' &&  item.invoiceUrl == '' && item.isRefund == '0'">申请退款</div>
            <div class="btn goto-pay" @click="applyInvoice(item)" v-if="isOrderDateThisYear(item.createTime)  && item.orderStatus == '1' && item.isRefund == '0' && item.isApplyInvoice &&  ( item.invoiceStatus == '-1' || item.invoiceStatus == '3' || item.invoiceStatus == '4' || item.invoiceStatus == '6' || item.invoiceStatus == '7')">申请发票</div>
            <div class="btn forbid" v-if="item.invoiceStatus == '1' || item.invoiceStatus == '0'">发票申请中</div>
            <!--<div class="btn goto-pay" @click="applyInvoice(item)">申请发票</div>-->
            <div class="btn goto-pay" @click="downInvoice(item)" v-if=" item.invoiceMethod == '0' && item.invoiceStatus == '2' && item.invoiceUrl && item.invoiceUrl != ''">下载发票</div>
            <div v-if="item.orderStatus == '3'" class="btn" @click="del(item.id)">删除订单</div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <pagination class="center-pagination-theme" :layout="'total,prev, pager, next, jumper'" v-show="total>0" :total="total" :page.sync="listQuery.pageNum"
                :limit.sync="listQuery.pageSize" @pagination="getList"/>


    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" title="申请发票" :close-on-click-modal="false">
      <ApplyInvoice :applyInvoiceOrder="applyInvoiceOrder" @close="closeApply"/>
    </el-dialog>


    <el-dialog v-if="showBuy" :visible.sync="showBuy" title="自购详情" :close-on-click-modal="false">
      <SelfBuy :selfBuyOrderId="selfBuyOrderId" @close="closeShowBuy"/>

    </el-dialog>
  </div>
</template>

<script>
  import index from "./my-orderjs";
  export default {
    ...index
  }
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
@import "my-order";
</style>
